<template>
    <el-dialog
        v-model="dislogs"
        title="编辑"
        width="60%"
        :before-close="handleClose"
    >
        <div class="points">
            <div class="pl">
                <p v-for="item in list" @dblclick="clickName(item)">{{item.name}}</p>
            </div>
            <div class="pz"></div>
            <div class="pr">
                <div style="padding: 5px;">
                    <el-button size="small" @click="clickName({value:'+'})">+</el-button>
                    <el-button size="small" @click="clickName({value:'-'})">-</el-button>
                    <el-button size="small" @click="clickName({value:'*'})">*</el-button>
                    <el-button size="small" @click="clickName({value:'/'})">/</el-button>
                </div>
                <el-input
                    v-model="data"
                    :rows="12"
                    type="textarea"
                    resize="none"
                />
            </div>
        </div>
        <div class="edit">
            <el-button size="small" @click="handleClose">取消</el-button>
            <el-button size="small" @click="empty">清空</el-button>
            <el-button size="small" type="success" @click="handleClose">保存</el-button>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
    import {ref,watch} from "vue"
    import { ElMessageBox } from 'element-plus'
    const props = defineProps({
        list:{
            type:Array,
            required:true
        }
    })
    let dislogs = ref(true)
    let data = ref('')
    const emits = defineEmits(['shutDown'])
    const handleClose = ()=>{
        dislogs.value=false
        emits('shutDown',false,data.value)
    }
    const clickName = (item)=>{
        data.value=data.value+item.value
    }
    const empty = ()=>{
        data.value=[]
    }
</script>
<style lang="scss" scoped>
    .points{
        display: flex;
        .pl{
            flex: 1;
            height: 300px;
            border: 1px solid #999999;
            overflow: auto;
            p{
                font-size: 12px;
                line-height: 22px;
                padding: 5px;
                border-bottom: 1px solid #999999;
                cursor: pointer;
            }
        }
        .pz{
            width: 10px;
        }
        .pr{
            flex: 1;
            height: 300px;
            overflow: auto;
            border: 1px solid #999999;
        }
    }
    .edit{
        margin-top: 10px;
        text-align: right;
    }
</style>